<template>
  <div class="home-contianer">
    <div class="topBox">
      <div id="EchartBox4" class="EchartBox EchartBoxs"  >
        <div class="numBox" v-for="(item,index) in zongheList" :key="item.Dj">
          <div>
            <p  :class="'bgc'+index">
              <span>{{ item.Dj }}</span>
              <el-tooltip
              class="box-item"
              effect="light"
              :content=" item.Ds+' 单'"
              placement="top-start"
            >
              <b>{{ item.Ds }}</b>
            </el-tooltip>
            </p>
            <p class="title">{{ item.Lx }}</p>
          </div>
        </div>
      </div>
      <!-- <div id="EchartBox1" class="EchartBox EchartBoxs">
       <div class="topContainer"  v-for="(item) in xiaoshouList" :key="item.name">
          <div >
            <div class="leftBox">
              <span class="iconfont" :class="'icon-'+item.icont"></span>
            </div>
            <div class="rightBox">
              <p>
                {{ item.name }} 
              </p>
              <p>
                <el-tooltip
              class="box-item"
              effect="light"
              :content=" item.value+' 元'"
              placement="top-start"
            >
              <b>{{ item.value }}
                <span style="font-size: 12px;"> 元</span>
              </b>
            </el-tooltip>
              </p>
            </div>
          </div>
       </div>
       <div class="topContainer"  v-for="item in caigouList" :key="item.name">
          <div>
            <div class="leftBox">
              <span class="iconfont" :class="'icon-'+item.icont"></span>
            </div>
            <div class="rightBox">
              <p>
                {{ item.name }}
              </p>
              <p>
                <el-tooltip
              class="box-item"
              effect="light"
              :content=" item.value+' 元'"
              placement="top-start"
            >
              <b>{{ item.value }}
                <span style="font-size: 12px;"> 元</span>
              </b>
            </el-tooltip>
              </p>
            </div>
          </div>
       </div>
      </div> -->
      <div id="EchartBox3" class="EchartBox" >
        <!-- <ul class="listBox">
          <li v-for="item in testList" :key="item.id">
            <span></span>
            {{ item.text }}
          </li>
        </ul> -->
        <barEcharts :CEMSbarObj="BarDataObj" ID="EchartBox3"></barEcharts>
      </div>
    
      <!-- <div id="EchartBox6" class="EchartBox">
      </div> -->
    </div>
    <!-- <div class="centerBox "> -->
      <!-- 图表 -->
      <!-- <div id="EchartBox4" class="EchartBox">1</div>
      <div id="EchartBox5" class="EchartBox">
        <barEcharts2 :barObj="objData" ID="EchartBox5"></barEcharts2>
      </div> -->
      
    <!-- </div> -->
    <div class="bottomBox">
      <p>山东千河环境科技有限公司</p>
    </div>
  </div>
</template>
<script >
import * as echarts from "echarts";
import { chart1, chart2, chart3, chart4 } from "./home/home-chart-options";
import { ref,reactive, onMounted, onUnmounted } from "vue";
import http from "../api/http";
import store from "../store";
import barEcharts from "@/components/Echarts/CEMSbarEchart.vue";
import barEcharts2 from "@/components/Echarts/barEchart.vue";
import base  from "../uitils/common";
var $chart2;
export default {
  components: {
    barEcharts,
    barEcharts2
  },
  data() {
    return {
    
    };
  },
  setup() {
    // let testEcharts = ref(null)
    // let open = (item) => {
    //   window.open(item.url, "_blank");
    // };

    // http.post("api/q_produce_notarize/", {}, "").then((res) => {
    //     try {

    //     } catch (error) {
    //       console.log("错误", error);
    //     }
    //   });
    const BarDataObj=reactive({ name:[],data:[]})
    //销售
    let todayTotalPrices = ref(0),
      yesterdayTotalPrices = ref(0),
      monthTotalPrices = ref(0),
      yearTotalPrices = ref(0),
      purchase_todayTotalPrices = ref(0),
      purchase_notTotalPrices = ref(0),
      purchase_monthTotalPrices = ref(0),
      purchase_yearTotalPrices = ref(0);
    
    let zongheList =reactive([])
    let zongheList2 =reactive([])
    GettestFn()
    function GettestFn() {
      http.post("api/q_canshu/shixiao", {}, "").then((reslut) => {
        console.log("reslut", reslut);
        if(reslut.length>0){
          zongheList.push(...reslut)
        }
      });
    }
    let xiaoshouList = reactive([])
    function GetSalesData() {
      http.get("api/q_sales/GetSalesData", {}, "").then((reslut) => {
        // console.log("reslut12", reslut);
        if(reslut.status==200){
          reslut.data.forEach(element => {
              element.value = base.formatNumber(element.value )
            });
          xiaoshouList.splice(0,xiaoshouList.length)
          xiaoshouList.push(...reslut.data)
        }
      });
    }
    let caigouList = reactive([])
    function GetPurchasePaymentData() {
      http
        .get("api/q_purchase_payment/GetPurchasePaymentData", {}, "")
        .then((reslut) => {
          if(reslut.status==200){
            caigouList.splice(0,caigouList.length)
            reslut.data.forEach(element => {
              element.value = base.formatNumber(element.value )
            });
            caigouList.push(...reslut.data)
        }
        });
    }
    GetSalesData();
    GetPurchasePaymentData();
    let timeInterval = setInterval(() => {
      GetSalesData();
      // GetSalesDataTest();
      GetPurchasePaymentData();
    }, 3600000);
    onMounted(() => {
      // #region
      //盒子1
      // $chart = echarts.init(document.getElementById("EchartBox4"));
      // let option1 = {
      //   title: {
      //     text: "采购单",
      //     subtext: "付款状态",
      //     left: "center",
      //     top: 10,
      //   },
      //   tooltip: {
      //     trigger: "item",
      //     formatter: "{a} <br/>{b} : {c} ({d}%)",
      //   },
      //   toolbox: {
      //     show: true,
      //     feature: {
      //       mark: { show: true },
      //       dataView: { show: true, readOnly: false },
      //       // restore: { show: true },
      //       saveAsImage: { show: true },
      //     },
      //   },
      //   series: [
      //     {
      //       name: "数量",
      //       type: "pie",
      //       radius: [20, 140],
      //       center: ["50%", "50%"],
      //       roseType: "area",
      //       itemStyle: {
      //         borderRadius: 5,
      //       },
      //       data: [
      //         { value: 20, name: "已付款" },
      //         { value: 18, name: "未付款" },
      //         { value: 16, name: "付款中" },
      //       ],
      //     },
      //   ],
      // };
      // $chart.setOption(option1);
      //#ensregion
      //盒子2
      // $chart2 = echarts.init(document.getElementById("EchartBox5"));
      //   let option2 = {
       
      //     tooltip: {
      //       trigger: 'item'
      //     },
      //     legend: {
      //       orient: 'vertical',//设置上下排列
      //       top: '5%',
      //       left: 'left',
      //       itemGap: 10,
      //         // 设置每个图例项的图标形状
      //       itemStyle: {
      //         // borderWidth: 2,
      //         // borderColor: '#000',  // 图标边框颜色
      //       },
      //       formatter:  (name)=> {
      //         console.log("name",name)
      //         for (let index = 0; index < objData.length;index++) {
      //           if(objData[index].name==name){
      //             return  `${name} \n  \n ${objData[index].value}`
      //           }
      //         }
      //       }
      //     },
          
      //     series: [
      //     {
      //     type: 'pie',
      //     radius: ['60%', '70%'],
      //     avoidLabelOverlap: false,
      //     label: {
      //       show: false,
      //       position: 'center'
      //     },
      //     emphasis: {
      //       label: {
      //         show: true,
      //         fontSize: 20,
      //         fontWeight: 'bold'
      //       }
      //     },
      //     labelLine: {
      //       show: false
      //     },
      //     data:objData,
      //     itemStyle:[
      //     {
      //       name:"未发货",
      //       color:"#999"
      //     },
      //     {
      //       name:"未回款",
      //       color:"e6182a"
      //     }
      //     ]
      //   }
      //     ]
      // };
      // $chart2.setOption(option2);
      //盒子3
      // $chart3 = echarts.init(document.getElementById("EchartBox6"));
      let option3 = {
        title: {
          text: "统计",
          subtext: "统计明细",
          left: "center",
          top: 10,
        },
        xAxis: {
          type: "category",
          data: ["售后待回收", "运维待回收", "待采购", "待入库", "待审核"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "数量",
            type: "bar",
            radius: [20, 140],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 5,
            },
            data: [
              { value: 20, name: "售后待回收" },
              { value: 18, name: "运维待回收" },
              { value: 16, name: "待采购" },
              { value: 16, name: "待入库" },
              { value: 16, name: "待审核" },
            ],
          },
        ],
      };
      // $chart3.setOption(option3);
      window.onresize =  ()=> {
        // console.log("onresize",$chart2)
        $chart.resize();
        // $chart2.resize();
        // testEcharts.value.barChart.resize();
        // $chart3.resize();

      };
    });
    onUnmounted(() => {
      console.log("onUnmounted");
      setsetInterval.caller(timeInterval)
    });
     // 图2数据
     let objData =reactive([
      { value: 1, name: '未回款' },
      { value: 1, name: '未发货' },
      { value: 1, name: '未销售' }
    ])
    // GetSalesDataTest();
    function GetSalesDataTest() {
      http.get("api/q_payment_receipt_undone/GetSalesData", {}, "").then((reslut) => {
        console.log("未回款", reslut);
        if(reslut.status==200){
          objData.splice(0, objData.length);
          objData.push(...reslut.data)
          console.log("objData",objData)
        }
      });
    }
    // 获取综合柱状图数据
    getBarData()
    function getBarData(){
      http
        .post("api/q_purchase_application_not_mx/getPageData", {}, "")
        .then(({total}) => {
          // console.log("待采购单", total);
          BarDataObj.name.push("待采购单")
          BarDataObj.data.push(total)
          http
            .post("api/q_purchase_not_mx/getPageData", {}, "")
            .then(({total}) => {
              // console.log("待入库单", total);
              BarDataObj.name.push("待入库单")
              BarDataObj.data.push(total)
              http
                .post("api/q_after_recycle_not/getPageData", {}, "")
                .then(({total}) => {
                  // console.log("售后待回收单", total);
                  BarDataObj.name.push("售后待回收单")
                  BarDataObj.data.push(total)
                  http
                    .post("api/q_operations_recycle_not/getPageData", {}, "")
                    .then(({total}) => {
                      // console.log("运维待回收单", total);
                      BarDataObj.name.push("运维待回收单")
                      BarDataObj.data.push(total)
                    });
                })
            })
        })
     
    }
  // 消息列表
  const testList =reactive( [{
                              id:"123451",
                              text:"消息测试标题",
                              message: '消息测试内容消息测试内容消息测试内容消息测试内容',
                              date: '2022-05-02 03:10'
                            }])
    return {
      todayTotalPrices,
      yearTotalPrices,
      monthTotalPrices,
      yesterdayTotalPrices,
      purchase_todayTotalPrices,
      purchase_notTotalPrices,
      purchase_monthTotalPrices,
      purchase_yearTotalPrices,
      BarDataObj,
      objData,
      testList,
      zongheList,
      zongheList2,
      xiaoshouList,
      caigouList
      // testEcharts,
    };
  },
  destroyed() {},
};
var $chart, $chart2, $chart3;
</script>
<style lang="less" scoped>
*{
  box-sizing: border-box;
}
ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-contianer {
  padding: 6px;
  background: #eee;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  // .bottomBox,
  .centerBox,
  .topBox{
    flex: 1;
    display: flex;
    height: 250px;
    .EchartBox {
      // flex: 1;
      height: 49.8%;
      // width: 33.33%;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      background-color: rgb(255, 255, 255);
      border: 5px solid rgb(238, 238, 238);
      overflow: auto;
      // .numBox {
      //   width: 50%;
      //   padding: 5px;
      //   p{
      //     white-space: nowrap; /* 确保文本在一行内显示 */
      //     overflow: hidden; /* 隐藏溢出的内容 */
      //     text-overflow: ellipsis; /* 使用省略号表示文字被截断 */
      //   }
      //   .title {
      //     color: #999;
      //   }
      //   .money,
      //   b {
      //     line-height: 50px;
      //     font-size: 24px;
      //   }
      // }
      // .numBox:nth-child(2n-1) {
      //   border-right: 5px solid rgb(238, 238, 238);
      // }
      // .numBox:nth-child(2n) {
      //   border-left: 5px solid rgb(238, 238, 238);
      // }
      // .numBox:nth-child(1),
      // .numBox:nth-child(2) {
      //   border-bottom: 5px solid rgb(238, 238, 238);
      // }
      // .numBox:nth-child(3),
      // .numBox:nth-child(4) {
      //   border-top: 5px solid rgb(238, 238, 238);
      // }
    }
    #EchartBox4{
      width:100% !important ;
    }
    .EchartBoxs{
      width: 66.66%;
      display: flex;
      flex-wrap: wrap;
      .numBox{
        display: flex;
        flex-direction: column;
        width: 20%;
        height: 50%;
        padding: 5px;
        box-sizing: border-box;
          div{
            display: flex;
            height: 100%;
            flex-direction: column;
            box-shadow: 0 0 6px #999;
            border-radius: 3px;
            overflow: hidden;
            p{
              margin: 0;
              flex: 1;
             
            }
            p:nth-child(1){
              position:relative;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #55ce80;
              color: #ffffff;
              font-size: 36px;
              span{
                position:absolute;
                top:5px;
                left:5px;
                font-size:16px;
              }
              b {
                white-space: nowrap; /* 确保文本在一行内显示 */
                overflow: hidden; /* 隐藏溢出的内容 */
                text-overflow: ellipsis; /* 使用省略号表示文字被截断 */
              }
            }
            p:nth-child(1):hover{
              font-size: 40px;
              animation: fontSize 0.5s ;
            }
            p:nth-child(2){
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #ffffff;
              overflow: auto;
              padding: 5px;
            }
        .title{
          flex: 1;
        }
          }
      }
    }
    
    .EchartBoxs{
      .topContainer{
        width: 25%;
        height: 50%;
        padding: 5px;
      }
      .topContainer:nth-child(1)>div{
        background-image: url(../assets/imgs/home/1.png);
      }
      .topContainer:nth-child(2)>div{
        background-image: url(../assets/imgs/home/2.png);
      }
      .topContainer:nth-child(3)>div{
        background-image: url(../assets/imgs/home/3.png);
      }
      .topContainer:nth-child(4)>div{
        background-image: url(../assets/imgs/home/4.png);
      }
      .topContainer:nth-child(5)>div{
        background-image: url(../assets/imgs/home/5.png);
      }
      .topContainer:nth-child(6)>div{
        background-image: url(../assets/imgs/home/6.png);
      }
      .topContainer:nth-child(7)>div{
        background-image: url(../assets/imgs/home/7.png);
      }
      .topContainer:nth-child(8)>div{
        background-image: url(../assets/imgs/home/8.png);
      }
      .topContainer>div{
        display: flex;
        height: 100%;
        box-shadow: 0 0 6px #999;
        border-radius: 3px;
        overflow: hidden;
        // background-color: #55ce80;
        background-size: 100% 100%;
        color: #fff;
        div{
          background-color: rgba(80, 161, 242, 0.9);
        }
        .leftBox{
          display: flex;
          justify-content: center;
          align-items: center;
          width: 30%;
          border-right: 1px solid #fff;
          .iconfont{
            font-size: 36px;
          }
        }
        .rightBox{
          width: 70%;
          // display: flex;
          // flex-wrap: wrap;
          // flex-direction: column;
          // justify-content: center;
          // color: #fff;
          p{
            // flex:1;
            width: 100%;
            text-align: center;
          }
          p:nth-child(1){
            font-size: 20px;
            line-height: 26px;
          }
          p:nth-child(2){
            line-height: 50px;
            font-size: 36px;
            display: flex;
            width: 100%;
            text-align: center;
            justify-content: center;
            b {
              white-space: nowrap; /* 确保文本在一行内显示 */
              overflow: hidden; /* 隐藏溢出的内容 */
              text-overflow: ellipsis; /* 使用省略号表示文字被截断 */
             }
          }
          p:nth-child(2):hover{
            font-size: 40px;
            animation: fontSize 0.5s ;
          }
        }
      }
    }
  }
  @keyframes fontSize {
    0%{
      font-size: 36px;
    }
    100%{
      font-size: 40px;

    }
  }
  .bgc0{
    background-color: #19be6b !important;
  }
  .bgc1{
    background-color: #2db7f5 !important;
  }
  .bgc2{
    background-color: #ff9900 !important;
  }
  .bgc3{
    background-color: #546e7a !important;
  }
  .bgc4{
    background-color: #80f0db !important;
  }
  .bgc5{
    background-color: #55ce80 !important;
  }
  .bgc6{
    background-color: #83cddc !important;
  }
  .bgc7{
    background-color: #068a47 !important;
  }
  .bgc8{
    background-color: #e7983d !important;
  }
  .topBox {
    flex: 2;
    flex-wrap: wrap;
  }
  .centerBox {
    flex: 5;
  }
  .bottomBox {
    height: 30px;
    background-color: #ffffff;
    border-left:solid 5px #eeeeee;
    border-right:solid 5px #eeeeee;
    p {
      margin: 0;
      text-align: center;
      font-size: 16px;
      line-height: 30px;
      color: #999;
      letter-spacing:2px;
    }
  }
  .listBox {
    // padding: 10px;
    display: block;
    width: 100%;
    li {
      display: inline-block;
      width: 100%;
      padding: 5px;
      line-height: 30px;
      white-space: nowrap; /* 确保文本在一行内显示 */
      overflow: hidden; /* 隐藏溢出的内容 */
      text-overflow: ellipsis; /* 使用省略号表示文字被截断 */
      span{
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-right: 5px;
        border-radius: 50%;
        background-color: skyblue;
      }
    }
  }
}
/* 修改垂直滚动条 */
::-webkit-scrollbar {
  width: 2px; /* 修改宽度 */
}
 
/* 修改滚动条轨道背景色 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
 
/* 修改滚动条滑块颜色 */
::-webkit-scrollbar-thumb {
  background-color: #c7c7c7;
}
 
/* 修改滚动条滑块悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #888;
}
</style>
